<template>
  <div>
    <div style="display:flex;flex-direction:column">
       <a-button v-if="returnVisitBthPermission" icon="plus-circle" type="primary" style="width:130px;margin-left:24px;margin-top:20px"  @click="addReturnTask()" > 增加回访</a-button>
      <a-radio-group  v-model="returnVisitType"  style="margin: 16px 24px 0;">
        <a-radio-button value="record">回访记录</a-radio-button>
        <a-radio-button value="plan">回访任务</a-radio-button>
      </a-radio-group>
    </div>
    
    <div style="position: relative;">
     
       <!-- :pageSize="10" -->
      <super-table
        ref="ref_return_record_table"
        style="margin-top: 20px;"
        
        :scroll="{ x: 1200}"
        v-show="returnVisitType=='record'"
        ls_props_columns="returnVisitSituation"
        :rowKey="(record,index)=> index"
        :columns="returnVisitRecordColumns"
        :data="returnVisitRecordTable"
        :rowClassName="setRowClassName"
      
      >
        <!--序号-->
        <template slot="index" slot-scope="text,record,index">
          <span>{{index+1}}</span>
        </template>
        <!--计划回访人-->
        <template slot="scout_man" slot-scope="scout_man">
          <div >{{ scout_man?scout_man:'-' }}</div>
        </template>
        <!--回访目的-->
        <template slot="scout_purpose" slot-scope="scout_purpose">
          <div  >{{ scout_purpose?scout_purpose:'-' }}</div>
        </template>
        <!--回访话术-->
        <template slot="verbal_content" slot-scope="verbal_content">
          <div >{{ verbal_content?verbal_content:'-' }}</div>
        </template>
        <!--回访内容-->
        <template slot="scout_content" slot-scope="text">
          <a-tooltip placement="bottomLeft">
            <template slot="title">{{ text }}</template>
            <span > {{ text }}</span>
          </a-tooltip>
        </template>

      </super-table>
        <!-- :pageSize="10" -->
      <super-table
      
        :scroll="{x:1100}"
        style="margin-top: 20px;"
        ref="DetailsReturnVisitTask"
        ls_props_columns="DetailsReturnVisitTask"
        v-show="returnVisitType=='plan'"
        :data="returnVisitTaskTable"
        :rowKey="(record,index)=> index"
        :columns="returnVisitTaskColumns"
      >
        <!--序号-->
        <template slot="index" slot-scope="text,record,index">
          <span>{{index+1}}</span>
        </template>
        <!--操作-->
        <template slot="consultationOperation" slot-scope="text,record">
          <div class="g-flex g-color g-f-14" style="cursor: pointer;" >
            <a-button style="padding: 0;margin-right: 15px;" :disabled="record.scoutState!=0" @click="editReturnTask(record)" type="link">编辑</a-button>
            <a-button style="padding: 0" :disabled="record.scoutState!=0" @click.stop="cancelReturnTask(record)" type="link">取消</a-button>
          </div>
        </template>
      </super-table>
    </div>

    <!--新增回访--弹窗-->
    <add-return-visit-form
      @reloadReturnPlan="reloadReturnPlan"
      :customerId="this.customerId"
      @reLoad="$emit('reLoad')"
      ref="addReturnVisitForm"
       />
  </div>
</template>

<script>
import {SuperTable} from '@/components'
import { getReturnListByCustomerId, getReturnPlanListByCustomerId } from '@/api/customer/customer'
import addReturnVisitForm from '@/views/customer/customerDetails/components/TabReturnVisitForm/addReturnVisitForm'
export default {
  name: 'TabReturnVisitForm',
  components:{
    SuperTable,
    addReturnVisitForm
  },
  props:{
    customerId:{
      type:String,
      default:''
    },
    customerDetailsForm:{
      type:Object,
      default:()=>{}
    }
  },
  watch:{
    $route(){     
      if(this.$route.query.id && this.$route.query.card_no){
          this.customerId = this.$route.query.id
          this.card_no = this.$route.query.card_no
          this.$refs.ref_return_record_table && this.$refs.ref_return_record_table.refresh()
          this.$refs.DetailsReturnVisitTask && this.$refs.DetailsReturnVisitTask.refresh()
      }     
    },
  },

  mounted() {
    console.log('this.customerDetailsForm',this.customerDetailsForm)
  },
  activated() {
    if(this.$store.state.app.multiTab){
      // console.log('这里是激活缓存',this.$store.state.app)
      this.$nextTick(()=>{           
        this.$refs.ref_return_record_table && this.$refs.ref_return_record_table.refresh()
        this.$refs.DetailsReturnVisitTask && this.$refs.DetailsReturnVisitTask.refresh()
      })
    }
  },
  data(){
    return{
      returnVisitType:'record', //回访情况类型
      //回访记录
      returnVisitRecordTable: parameter => {
        return getReturnListByCustomerId(this.customerId).then(res => {  
          console.log('回访记录',res)
          this.getFilterOp(Object.keys(this.groupBy(res.rows,'scout_man')),"scout_man",res.rows) 
          this.getFilterOp(Object.keys(this.groupBy(res.rows,'actual_scout_man')),"actual_scout_man",res.rows) 
          this.getFilterOp(Object.keys(this.groupBy(res.rows,'recorder')),"recorder",res.rows) 
          this.getFilterOp(Object.keys(this.groupBy(res.rows,'scout_mode')),"scout_mode",res.rows) 
          this.getFilterOp(Object.keys(this.groupBy(res.rows,'scout_theme')),"scout_theme",res.rows) 
          this.getFilterOp(Object.keys(this.groupBy(res.rows,'org_name')),"org_name",res.rows) 
          return this.filterOp(parameter,res)
        })
      },

      //回访任务,
      returnVisitTaskTable: parameter=>{
        return getReturnPlanListByCustomerId(this.customerId).then(res => {
          console.log('回访任务',res)
          return res
        })
      },
      //回访记录表列结构
      returnVisitRecordColumns: [
        { title: '序号',scopedSlots: { customRender: 'index' }, width:60,fixed:'left'},
        { title: '实际回访人',dataIndex: 'actual_scout_man',fixed:'left', key: 'actual_scout_man',width:120,id:'actual_scout_man'},
        { title: '实际回访人部门',dataIndex: 'org_name',fixed:'left', key: 'org_name',width:120,id:'org_name'},
        { title: '实际回访时间',dataIndex: 'actual_scout_date', key: 'actual_scout_date',fixed:'left', width:150,sorter: (a, b) =>  new Date().getTime(a.actual_scout_date)  - new Date( b.actual_scout_date).getTime(),},
        { title: '计划回访时间',dataIndex: 'plan_scout_date', key: 'plan_scout_date',fixed:'left',width: 150,sorter: (a, b) =>  new Date(a.plan_scout_date).getTime() -  new Date(b.plan_scout_date).getTime()  , },      
        { title: '计划回访人', dataIndex: 'scout_man', scopedSlots: { customRender: 'scout_man' },fixed:'left',width: 120 ,id:'scout_man'},
        { title: '回访类型',dataIndex: 'scout_theme', key: 'scout_theme',width: 120 ,id:'scout_theme'},
        { title: '回访目的', dataIndex: 'scout_purpose',width: 120,ellipsis: true },
        { title: '回访话术', dataIndex: 'verbal_content',scopedSlots: { customRender: 'verbal_content' },width: 120 },
        { title: '回访内容', dataIndex: 'scout_content', key:  'scout_content',scopedSlots: { customRender: 'scout_content' },width:200,ellipsis: true, },  
        { title: '回访方式',dataIndex: 'scout_mode', key: 'scout_mode',width:120, id:'scout_mode'},
        { title: '是否有效沟通', dataIndex: 'is_valid', key:  'is_valid',width:110 },
        { title: '接听状态', dataIndex: 'receive_state', key:  'receive_state',width:120,ellipsis: true, }, 
        { title: '回访状态', dataIndex: 'scout_state', key:  'scout_state',width:120 },
        { title: '创建人',dataIndex: 'recorder', key: 'recorder',width:120,id:"recorder"},
        { title: '创建时间',dataIndex: 'record_date', key: 'record_date',width:150},
        { title: '取消人', dataIndex: 'cancel_man_id', key:  'cancel_man_id' ,width:120},
        { title: '取消原因', dataIndex: 'cancel_reason', key:  'cancel_reason' ,width:120}
      ],
      //回访任务表列结构
      returnVisitTaskColumns: [
        { title: '序号',scopedSlots: { customRender: 'index' }, width:60,fixed:'left'},
        { title: '计划回访时间',dataIndex: 'plan_scout_date', key: 'plan_scout_date' },
        { title: '计划回访人',dataIndex: 'scout_man', key: 'scout_man'},
        { title: '回访类型',dataIndex: 'scout_theme', key: 'scout_theme'},
        { title: '回访方式',dataIndex: 'scout_mode', key: 'scout_mode'},
        { title: '回访目的', dataIndex: 'scout_purpose',
          customRender:verbal_content=>{
            return verbal_content?verbal_content:'-'
          }
        },
        { title: '回访话术', dataIndex: 'verbal_content',
          customRender:verbal_content=>{
            return verbal_content?verbal_content:'-'
          }
        },
        { title: '创建人',dataIndex: 'recorder', key: 'recorder'},
        { title: '创建时间',dataIndex: 'record_date', key: 'record_date'},
        { title: '操作', scopedSlots: { customRender: 'consultationOperation' },width:135},
      ],
      modal_type:'add'
    }
  },
  computed:{
    //增加回访查看权限
    returnVisitBthPermission(){
      const admintype = this.$store.state.user.admintype
      if(admintype===1){
        return true
      }
      if(this.hasPerm('receive:receiveList')){
        return false
      }
      return true
    }
  },


  methods:{
    /**
     * data 数据分组的 key 集合
     * res 全部数据
     */
    filterOp(data,res,callback){
        let result={}
        result.code= 200,
        result.msg= "查询成功"
        result.rows=[]
        let tempArr=[]
        let list = JSON.parse(JSON.stringify(res.rows))
        let num =0 //满足的条件个数
        // 回访类型
        if(data.hasOwnProperty('scout_theme') && data.scout_theme.length>0){    
          num=num + data.scout_theme.length
          data.scout_theme.forEach(i=>{
            let tempList= list.filter(item=>{
                return item.scout_theme == i
              })    
              tempArr= tempArr.concat(tempList)
          })
          result.rows=tempArr
          list= tempArr
          result.total = result.rows.length
        }
        // 创建人 
        if(data.hasOwnProperty('recorder') && data.recorder.length>0){    
          let tempArr =[]
          num=num + data.recorder.length
          data.recorder.forEach(i=>{
            let tempList= list.filter(item=>{
                return item.recorder == i
              })    
              tempArr= tempArr.concat(tempList)
          })
          result.rows=tempArr
          list= tempArr
          result.total = result.rows.length
        }
        // scout_man 计划回访人
         if(data.hasOwnProperty('scout_man') && data.scout_man.length>0){    
          let tempArr =[]
          num=num + data.scout_man.length
          data.scout_man.forEach(i=>{
            let tempList= list.filter(item=>{
                return item.scout_man == i
              })    
              tempArr= tempArr.concat(tempList)
          })
          result.rows=tempArr
          list= tempArr
          result.total = result.rows.length
        }
        // actual_scout_man  实际回访人
        if(data.hasOwnProperty('actual_scout_man') && data.actual_scout_man.length>0){    
          let tempArr =[]
          num=num + data.actual_scout_man.length
          data.actual_scout_man.forEach(i=>{
            let tempList= list.filter(item=>{
                return item.actual_scout_man == i
              })    
              tempArr= tempArr.concat(tempList)
          })
          result.rows=tempArr
          list= tempArr
          result.total = result.rows.length
        }
        // scout_mode  回访方式
        if(data.hasOwnProperty('scout_mode') && data.scout_mode.length>0){    
          let tempArr =[]
          num=num + data.scout_mode.length
          data.scout_mode.forEach(i=>{
            let tempList= list.filter(item=>{
                return item.scout_mode == i
              })    
              tempArr= tempArr.concat(tempList)
          })
          result.rows=tempArr
          list= tempArr
          result.total = result.rows.length
        }       
        // org_name  实际回访人部门
        if(data.hasOwnProperty('org_name') && data.org_name.length>0){    
          let tempArr =[]
          num=num + data.org_name.length
          data.org_name.forEach(i=>{
            let tempList= list.filter(item=>{
                return item.org_name == i
              })    
              tempArr= tempArr.concat(tempList)
          })
          result.rows=tempArr
          list= tempArr
          result.total = result.rows.length
        }       
        if(num == 0 ){
          return res
        }else{
          return result
        }
       
    },

    /**
     * keys 数据分组的 key 集合
     * key  当前需要分组 的字段 
     * list  全部数据
     * 
     * 分组 得到的 数据格式
     * {
     *    a:[]
     *    b:[]
     * }
     */
    getFilterOp(keys,key,list){
        let arr =[]
        keys.forEach(item=>{
          let obj={}
          obj.text=item || ''
          obj.value=item || ''    
          // obj.id= list.filter(i=>{ return i[key] == item })[0].scout_man_id|| ''          
          arr.push(obj)
        })  
        this.returnVisitRecordColumns.filter(items=>{
          return items.id == key
        })[0].filters=arr

      //  if(key == 'scout_man'){
      //       let arr =[]
      //       keys.forEach(item=>{
      //         let obj={}
      //         obj.text=item || ''
      //         obj.value=item || ''    
      //         // obj.id= list.filter(i=>{ return i[key] == item })[0].scout_man_id|| ''          
      //         arr.push(obj)
      //       })  
      //       this.returnVisitRecordColumns.filter(items=>{
      //         return items.id == key
      //       })[0].filters=arr
      //  }

      //  if(key == 'actual_scout_man'){
      //       let arr =[]
      //       keys.forEach(item=>{
      //         let obj={}
      //         obj.text=item || ''
      //         obj.value=item || ''    
      //         // obj.id= list.filter(i=>{ return i[key] == item })[0].actual_scout_man_id|| ''          
      //         arr.push(obj)
      //       })  
      //       // console.log("actual_scout_man",arr)

      //       this.returnVisitRecordColumns.filter(items=>{
      //         return items.id == key
      //       })[0].filters=arr
      //  }

      //  if(key == 'recorder'){
      //       let arr =[]
      //       keys.forEach(item=>{
      //         let obj={}
      //         obj.text=item || ''
      //         obj.value=item || ''    
      //         // obj.id= list.filter(i=>{ return i[key] == item })[0].recorder|| ''          
      //         arr.push(obj)
      //       })  
      //       this.returnVisitRecordColumns.filter(items=>{
      //         return items.id == key
      //       })[0].filters=arr
      //  }
       
      //  if(key =='scout_mode'){
      //       let arr =[]
      //       keys.forEach(item=>{
      //         let obj={}
      //         obj.text=item || ''
      //         obj.value=item || ''    
      //         // obj.id= list.filter(i=>{ return i[key] == item })[0].scout_mode_id|| ''          
      //         arr.push(obj)
      //       })  
      //       this.returnVisitRecordColumns.filter(items=>{
      //         return items.id == key
      //       })[0].filters=arr
      //  }

      //  if(key == 'scout_theme'){
      //       let arr =[]
      //       keys.forEach(item=>{
      //         let obj={}
      //         obj.text=item || ''
      //         obj.value=item || ''    
      //         // obj.id= list.filter(i=>{ return i[key] == item })[0].scout_theme|| ''          
      //         arr.push(obj)
      //       })  
      //       this.returnVisitRecordColumns.filter(items=>{
      //         return items.id == key
      //       })[0].filters=arr
      //  }
       
      //  if(key == 'org_name'){
      //       let arr =[]
      //       keys.forEach(item=>{
      //         let obj={}
      //         obj.text=item || ''
      //         obj.value=item || ''    
      //         // obj.id= list.filter(i=>{ return i[key] == item })[0].scout_theme|| ''          
      //         arr.push(obj)
      //       })  
      //       this.returnVisitRecordColumns.filter(items=>{
      //         return items.id == key
      //       })[0].filters=arr
      //  }
    },
    groupBy(data,key){
        let groups={};
        data.forEach(c=>{
            let value=c[key];
            if(value){
                groups[value]=groups[value]||[];
                groups[value].push(c);
            }         
        });
        return groups;
    },

     setRowClassName (record,index) {
         
     
           return   (index%2 ==0) ? 'huang' : 'hui'
       
     
    },
    
    //刷新回访计划
    reloadReturnPlan(){
      this.returnVisitType='plan'
      this.$refs.DetailsReturnVisitTask.refresh()
      this.$refs.ref_return_record_table.refresh()
    },
    /**
     * 新增回访任务
     * **/
    addReturnTask(record={}){
      this.modal_type='add'
      this.$refs.addReturnVisitForm.add(this.customerDetailsForm,record,this.modal_type)
    },
    /**
     * 编辑回访任务
     * **/
    editReturnTask(record={}){
      this.modal_type='edit'
      this.$refs.addReturnVisitForm.add(this.customerDetailsForm,record,this.modal_type)
    },
    /**
     * 取消回访任务
     * **/
    cancelReturnTask(record={}){
      this.modal_type='cancel'
      this.$refs.addReturnVisitForm.add(this.customerDetailsForm,record,this.modal_type)
    },

  }
}
</script>

<style lang="less" scoped>
   /deep/ .hui,
/deep/ .hui:hover,
/deep/ .hui>td:hover,
/deep/ .hui>td{
  background-color: #ffffff !important; 
}

 /deep/ .huang,
/deep/ .huang:hover,
/deep/ .huang>td:hover,
/deep/ .huang>td{
  background-color: rgb(255, 251, 230) !important; 
}

/deep/ .ant-table-pagination.ant-pagination{
  visibility: hidden;
}
</style>